<script setup lang='ts'>
import { getLittleNews } from '@/services/healthNews'
import type { HealthNews } from '@/types/healthnews'
import { onLoad } from '@dcloudio/uni-app'
import { defineComponent, onMounted, ref } from 'vue'
//查看更多头条信息的按钮
const selectMore = async () => {
  const res = await getLittleNews()
  console.log('点击事件触发')
  console.log(res)
}
defineProps<{
  list: HealthNews[]
}>()


//跳转列表的的点击事件
const listClick = () => {
  uni.navigateTo({
    url: '/pages/healthNews/newsList',
  })
}
const swiperClick = (newsId: string) => {
  uni.navigateTo({
    url: `/pages/healthNews/newsContent?newsId=${newsId}`,
  })
}

</script>
<template>
  <uni-section class='uni-title' titleColor='#000' titleFontSize='18px' title='健康头条'
               sub-title='科普健康知识不再是小白'>
    <template v-slot:right>
      <uni-icons @tap='listClick()' type='right' size='18' color='#999'></uni-icons>
    </template>
    <view class='healthFather'>
      <view class='healthMiddle' style='margin-top: 8px;height: 30px;'>
        <text class='newStyle' style='position: relative;right: 8px;'>NEW</text>
        <swiper class='swiper' :duration='300' :autoplay='true' :interval='5000' vertical>
          <swiper-item class='item' v-for='(item, index) in list' :key='index'>
            <text @tap='swiperClick(item.newsId)'>{{ item.newsTitle }}</text>
          </swiper-item>
        </swiper>
      </view>
      <text class='moreMsg' @tap='listClick()'>查看更多健康咨询</text>
    </view>
  </uni-section>
</template>


<style scoped lang='scss'>
.healthFather {
  margin: 0 20rpx;
  background-color: #ffffff;
  border-radius: 10px;

  .newStyle {
    background-color: #ff3d4c;
    color: #ffdfdf;
    width: 105rpx;
    text-align: center;
    height: 60rpx;
    line-height: 60rpx;
    display: inline-block;
    font-size: 15px;
    border-radius: 5px;
    border: 1px solid rgb(170, 169, 166);
    transform: scale(0.4);
  }

  .swiper {
    display: inline-block;
    width: 200px;
    height: 20px;
    margin-left: -13px;
    position: relative;
    top: 2px;

    .item {
      justify-content: center;
      align-items: center;
      font-size: 16px;
      font-weight: bold;
      //color: #3c3e42;
      background-color: #ffffff;
      overflow: hidden;
      word-break: break-all;
      text-overflow: ellipsis;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      white-space: nowrap;
      display: -webkit-box;
    }
  }

  .moreMsg {
    background-color: #3ecd80;
    display: inline-block;
    width: 150px;
    height: 25px;
    font-size: 12px;
    text-align: center;
    color: white;
    font-weight: bold;
    border-radius: 5px;
    padding-top: 6px;
  }
}
</style>
